<!DOCTYPE html> <!-- 定义文档类型为HTML5 -->
<html>
<head>
  <title>ESP32 配网</title> <!-- 设置网页标题 -->
  <meta charset="UTF-8"> <!-- 设置字符编码 -->
  <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 设置视口，适配移动设备 -->
  <style>
    body { 
      font-family: Arial, sans-serif; 
      text-align: center; 
      margin-top: 50px; 
    } /* 设置主体样式 */
    select, input, button { 
      margin: 10px; /* 外边距 */
      padding: 10px; /* 内边距 */
      width: 80%; /* 宽度 */
      max-width: 324px; /* 最大宽度 */
      min-width: 200px; /* 最小宽度，确保在手机上有合适的宽度 */
      border-radius: 15px; /* 设置圆角 */
      box-sizing: border-box; /* 包括内边距和边框在内的总宽度和高度 */
      font-size: 16px; /* 统一的字体大小 */
    }
    select {
      height: 50px; /* 设置下拉框的高度 */
    }
    button { 
      padding: 10px 20px; /* 内边距 */
    }
  </style>
</head>
<body>
  <h1>选择WiFi网络并输入密码</h1> <!-- 主标题 -->
  <form id="wifiForm" action="/connect" method="post"> <!-- 表单，提交到/connect，使用POST方法 -->
    <select name="ssid" id="ssid">
      <option>正在扫描周围网络</option> <!-- 默认选项，加载中 -->
    </select><br>
    <input type="password" name="password" placeholder="WiFi密码"><br> <!-- 密码输入框 -->
    <button type="submit" id="connectButton">连接</button> <!-- 提交按钮 -->
  </form>
  <script>
    // 使用XMLHttpRequest获取WiFi列表
    function loadWiFiList() {
      var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
      xhr.open('GET', '/scan', true); // 初始化请求
      xhr.onload = function () {
        if (xhr.status === 200) { // 如果请求成功
          var ssidList = JSON.parse(xhr.responseText); // 解析响应为JSON
          var select = document.getElementById('ssid'); // 获取下拉框元素
          select.innerHTML = ''; // 清空下拉框内容
          ssidList.forEach(function(ssid) {
            var option = document.createElement('option'); // 创建新的option元素
            option.value = ssid; // 设置option的值
            option.text = ssid; // 设置option的文本
            select.appendChild(option); // 添加option到下拉框
          });
        }
      };
      xhr.send(); // 发送请求
    }

    // 初次加载时获取WiFi列表
    loadWiFiList();

    // 处理表单提交
    var form = document.getElementById('wifiForm');
    form.onsubmit = function(event) {
      event.preventDefault(); // 阻止默认表单提交
      var formData = new FormData(form); // 创建FormData对象
      var connectButton = document.getElementById('connectButton'); // 获取连接按钮

      // 禁用按钮并更新文本
      connectButton.disabled = true;
      connectButton.innerText = '正在连接...';

      var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest对象
      xhr.open('POST', '/connect', true); // 初始化请求
      xhr.onload = function () {
        if (xhr.status === 200) { // 如果请求成功
          var response = xhr.responseText; // 获取响应文本
          if (response === "Connected successfully!") {
            alert("连接成功！"); // 显示成功消息
          } else {
            alert("连接失败，请检查SSID和密码后重试。"); // 显示失败消息
            document.getElementsByName('password')[0].value = ''; // 清空密码输入框
          }
          // 恢复按钮状态
          connectButton.disabled = false;
          connectButton.innerText = '连接';
        }
      };
      xhr.send(formData); // 发送请求和表单数据
    };
  </script>
</body>
</html>
)=====";